<template>
  <div id="message">
    <div class="head">
      <div>宝贝</div>
      <div>留言内容</div>
      <!-- <div>数量</div>
      <div>实付款</div> -->
      <div>留言时间</div>
      <div>留言操作</div>
    </div>
    <ul>
      <li v-for="items in ulData" :key="items.message.messageId">
        <div class="li_head"><strong>{{items.goodsWant.goodsWantName}}</strong></div> 
        <div class="li_detail">
          <img :src="items.goodsWant.goodsWantImage" alt="" style="cursor: pointer" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)">
          <span style="width: 288px; display:inline-block; margin-left:10px; vertical-align: top"><a href="javascript:void(0)" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)">{{items.goodsWant.goodsWantInfo}}</a></span>
          <span style="display:inline-block; vertical-align:top; margin-left:30px; width: 350px; font-size: 15px">{{items.message.content}}</span>
          <span style="display:inline-block; vertical-align:top; margin-left:10px">{{items.message.gmtCreate}}</span>
          <!-- <span style="display:inline-block; vertical-align:top; margin-left:82px"><strong>￥{{items.price * items.count}}</strong></span>
          <span style="display:inline-block; vertical-align:top; margin-left:115px">交易成功</span> -->
          <span style="display:inline-block; vertical-align:top; margin-left: 89px"><a href="javascript:void(0)" @click="deleteClick(items.message.messageId)">删除</a></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      ulData: [
        {message: {messageId: '', content: '', gmtCreate: ''}, goodsWant: {goodsWantName: '', goodsWantInfo: '', goodsWantImage: '', goodsWant: '', goodsWantId: ''}}
      ]
    }
  },
  // 一进到本页面，就向服务器请求数据
  mounted() {
    request({
      url: `/message/showMessage/${this.$store.state.userId}`,
      method: 'get'
    }).then(res => {
      console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    deleteClick(messageId) {
      // 点击删除按钮，向服务器发送请求
      request({
        url: `/message/deleteMessage/${messageId}`,
        method: 'delete'
      }).then(res => {
        // console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          // 向服务器请求数据，更新页面数据
          request({
            url: `/message/showMessage/${this.$store.state.userId}`,
            method: 'get'
          }).then(res => {
            // console.log(res);
            this.ulData = res.data.data.items
          }).catch(err => {
            console.log(err);
          })
        }
      }).catch(err => {
        console.log(err);
      })
    },
    goodsClick(goodsWantId, goodsWant) {
      // 点击商品图片或文字，跳转到该商品详情页面
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      this.$router.push('/goodsDetail')
    }
  }
}
</script>

<style scoped>
  #message {
    font-size: 12px;
  }

  #message .head {
    height: 39px;
    line-height: 39px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
  }

  #message .head div {
    display: inline-block;
  }

  #message .head div:first-child {
    width: 450px;
    text-align: center;
  }

  #message .head div:nth-child(2) {
    width: 360px;
  }

  #message .head div:nth-child(3) {
    width: 200px;
  }

  /* #message .head div:nth-child(4) {
    width: 150px;
  }

  #message .head div:nth-child(5) {
    width: 150px;
  }

  #message .head div:nth-child(6) {
    width: 150px;
  } */

  #message ul li {
    border: 1px solid #ececec;
    margin-bottom: 10px;
  }

  #message ul li .li_head {
    background-color: #f5f5f5;
    height: 39px;
    line-height: 39px;
    padding-left: 30px;
  }

  #message ul li .li_detail {
    padding: 20px 30px;
  }

  #message ul li .li_detail img {
    width: 80px;
    height: 80px;
  }

  #message ul li .li_detail a {
    text-decoration: none;
    color: inherit;
    vertical-align: top;
  }

  #message ul li .li_detail a:hover {
    color: #f00;
  }
</style>